<template>
  <div class="about">
    <div class="head">
        <div class="top">
                <div @click="$router.go(-1)">
                    <img src="../../assets/imageZhaoPin/返回黑@2x.png" alt="">
                    <span style="color: #1DA4F2;">返回</span>
                </div>
                <div>
                    <span>我的求职</span>
                </div>
                <div style="width:60px;">
                </div>
        </div>

    </div>
    <div class="main1">
    <div class="main" v-for="(item,k) in vshow" :key="k" @click="qoqiu(k)">
        <div class="fath">
        <div class="left" style="width:60px;">
          <img :src="item.PHOTO.length > 0 && item.PHOTO.substring(0, 4) === 'http' ? item.PHOTO : imgHttp + item.PHOTO" alt="" />
          <span v-if="item.sx" style="color: #1DA4F2; background-color: #E8F6FE;">正常</span>
            <span v-else style="color: #E3170D; background-color: #FCE7E6;">作废</span>
        </div>
        <div class="center">
            <h3>{{item.POSITION}}</h3>
            <p>
                <span>{{item.NAME}}</span>
                <span v-if="item.SEX===1">男</span>
                <span v-else>女</span>
                <span>{{item.AGE}}岁</span>
            </p>
            <p>工作年限: {{item.YEARS}}年</p>
            <p class="ssx">能力描述: {{item.SKILL}}</p>
        </div>
        <div class="right">
            <p style="margin-bottom: 40px" v-if="item.SALARY1==undefined">
                  不限
              </p>
              <p style="margin-bottom: 40px" v-else-if="item.SALARY2==undefined">
                  不限
              </p>
              <p style="margin-bottom: 40px" v-else>
                {{ item.SALARY1 / 1000 }}k-{{ item.SALARY2 / 1000 }}k
              </p>
            <span>{{item.DISTRICT}}</span>
        </div>
        </div>
        <div class="button clear">

           <button v-if="item.sx" @click.stop="shanc(k)">作废发布</button>
           <button v-else @click.stop="chongx(k)">重新发布</button>
           <button  class="shanchu" @click.stop="sscc(k)">删除发布</button>
       </div>
        </div>
      <van-empty  class="custom-image"
                  image="https://img.yzcdn.cn/vant/custom-empty-image.png"
                  description="无数据" v-if="vshow.length<=0" />
       <van-popup v-model="show" class="pop" :close-on-click-overlay=false>
           <div class="tt" style="text-align: center;font-size: 15px;font-family: PingFang SC;font-weight: bold;color: #333333;line-height:75px;">确定重新发布吗?</div>
           <div class="bb clear">
               <div class="ll" style="float:left;width:100px;font-family: PingFang SC;font-weight: bold;color: #999;font-size: 13px;text-align: right;line-height:50px;" @click="qu2()">
                   <span style="border-right: 1px solid #999;padding-right:30px;">取消</span>
               </div>
               <div class="rr" style="float:left;width:100px;font-family: PingFang SC;font-weight: bold;color: #1DA4F2;font-size: 13px;text-align: center;line-height:50px;" @click="ding2()" v-if="djmsg1">
                   <span>确认</span>
               </div>
               <div class="rr" style="float:left;width:100px;font-family: PingFang SC;font-weight: bold;color: #1DA4F2;font-size: 13px;text-align: center;line-height:50px;" v-else>
                   <span>确认</span>
               </div>
           </div>
       </van-popup>
       <van-popup v-model="show1" class="pop" :close-on-click-overlay=false>
           <div class="tt" style="text-align: center;font-size: 15px;font-family: PingFang SC;font-weight: bold;color: #333333;line-height:75px;">确定作废吗?</div>
           <div class="bb clear">
               <div class="ll" style="float:left;width:100px;font-family: PingFang SC;font-weight: bold;color: #999;font-size: 13px;text-align: right;line-height:50px;" @click="qu1()">
                   <span style="border-right: 1px solid #999;padding-right:30px;">取消</span>
               </div>
               <div class="rr" style="float:left;width:100px;font-family: PingFang SC;font-weight: bold;color: #1DA4F2;font-size: 13px;text-align: center;line-height:50px;" @click="ding1()" v-if="djmsg2">
                   <span>确认</span>
               </div>
               <div class="rr" style="float:left;width:100px;font-family: PingFang SC;font-weight: bold;color: #1DA4F2;font-size: 13px;text-align: center;line-height:50px;" v-else>
                   <span>确认</span>
               </div>
           </div>
       </van-popup>
         <van-popup v-model="show2" class="pop" :close-on-click-overlay=false>
           <div class="tt" style="text-align: center;font-size: 15px;font-family: PingFang SC;font-weight: bold;color: #333333;line-height:75px;">确定删除吗?</div>
           <div class="bb clear">
               <div class="ll" style="float:left;width:100px;font-family: PingFang SC;font-weight: bold;color: #999;font-size: 13px;text-align: right;line-height:50px;" @click="show2=false">
                   <span style="border-right: 1px solid #999;padding-right:30px;">取消</span>
               </div>
               <div class="rr" style="float:left;width:100px;font-family: PingFang SC;font-weight: bold;color: #1DA4F2;font-size: 13px;text-align: center;line-height:50px;" @click="ding3()" v-if="djmsg3">
                   <span>确认</span>
               </div>
               <div class="rr" style="float:left;width:100px;font-family: PingFang SC;font-weight: bold;color: #1DA4F2;font-size: 13px;text-align: center;line-height:50px;" v-else>
                   <span>确认</span>
               </div>

           </div>
       </van-popup>
    </div>
    <van-loading type="spinner" color="#1989fa" class="ssaa" v-show="msg==true"/>
    <div v-show="msg1==true" class="bbt"><span>暂无更多数据......</span></div>
  </div>
</template>

<script>
import AeraInfo from '../../assets/UseJS/area.js'
import {listServiceXiangmu, saveServiceRecord} from '../../apiZhaoPin/api'

import $ from 'jquery'

export default {
  data () {
    return {
      img1: require('../../assets/imageZhaoPin/下拉@2x.png'),
      img2: require('../../assets/imageZhaoPin/上拉@2x.png'),

      show1: false,
      areaList: AeraInfo,
      arrArea: [],
      va1: '',
      va2: '',
      addrInfo: '',
      vshow: [],
      show: false,
      show2: false,
      la: '',
      idd: '',
      xa: '',
      page: 1,
      msg: true,
      msg1: false,
      isbool: true,
      djmsg1: true,
      djmsg2: true,
      djmsg3: true,
      kk: '',
      imgHttp: '../../../upimgs/'
    }
  },
  methods: {
    sscc (k) {
      this.la = this.vshow[k].EMPLOYEE_ID
      this.show2 = true
      this.djmsg3 = true
      this.kk = k
      // saveServiceRecord({
      //     EMPLOYEE_ID:id,
      //     STATUS:2,
      //     }).then(res=>{
      //       console.log(res);
      //     })
      //     this.vshow.splice(k,1)
    },
    ding3 () {
      this.djmsg3 = false
      saveServiceRecord({
        EMPLOYEE_ID: this.la,
        STATUS: 2
      }).then(res => {
        console.log(res)
      })
      this.vshow.splice(this.kk, 1)
      this.show2 = false
      console.log(this.kk)
    },
    aa () {
      var id = this.$route.query.userid
      this.idd = id
      listServiceXiangmu({
        PAGE: 0
      }).then(res => {
        console.log(res)
        //   this.vshow=res
        let shujuArr = []
        for (var i = 0; i < res.length; i++) {
          let shuju = {}
          shuju.POSITION = res[i].POSITION
          shuju.NAME = res[i].NAME
          shuju.SEX = res[i].SEX
          shuju.AGE = res[i].AGE
          shuju.YEARS = res[i].YEARS
          shuju.SKILL = res[i].SKILL
          shuju.SALARY1 = res[i].SALARY1
          shuju.SALARY2 = res[i].SALARY2
          shuju.DISTRICT = res[i].DISTRICT
          shuju.EMPLOYEE_ID = res[i].EMPLOYEE_ID
          shuju.STATUS = res[i].STATUS
          shuju.PHOTO = res[i].PHOTO
          // eslint-disable-next-line eqeqeq
          if (shuju.STATUS == 1) {
            shuju.sx = true
            // eslint-disable-next-line eqeqeq
          } else if (shuju.STATUS == 0) {
            shuju.sx = false
          }

          shujuArr.push(shuju)
        }
        this.vshow = shujuArr
        console.log(this.vshow)
        if (this.vshow.length < 10) {
          console.log(this.vshow.length)
          this.msg = false
          this.msg1 = false
        } else {
          this.msg = true
          this.msg1 = true
        }
      })
    },
    qoqiu (k) {
      // eslint-disable-next-line eqeqeq
      if (this.vshow[k].sx == true) {
        this.$router.push('qiuxiang?id=' + this.vshow[k].EMPLOYEE_ID)
        // eslint-disable-next-line eqeqeq
      } else if (this.vshow[k].sx == false) {
        this.$router.push('wdqiuxinjian?id=' + this.vshow[k].EMPLOYEE_ID)
      }
    },
    shanc (k) {
      this.la = this.vshow[k].EMPLOYEE_ID
      this.show1 = true
      this.xa = k
      console.log(this.la)
      this.djmsg2 = true
      this.djmsg1 = true
    },
    chongx (k) {
      this.la = this.vshow[k].EMPLOYEE_ID
      this.show = true
      this.xa = k
      this.djmsg2 = true
      this.djmsg1 = true
    },
    qu1 () {
      this.show1 = false
    },
    ding1 () {
      this.djmsg2 = false
      saveServiceRecord({
        EMPLOYEE_ID: this.la,
        STATUS: 0
      }).then(res => {
        console.log(res)
        this.vshow[this.xa].sx = !this.vshow[this.xa].sx
        // eslint-disable-next-line eqeqeq
        if (res == 'success') {

        } else {
          this.$toast('操作失败请重试!')
        }
      })

      this.show1 = false
    },
    qu2 () {
      this.show = false
    },
    ding2 () {
      this.djmsg1 = false
      saveServiceRecord({
        EMPLOYEE_ID: this.la,
        STATUS: 1
      }).then(res => {
        console.log(res)
        this.vshow[this.xa].sx = !this.vshow[this.xa].sx
        // eslint-disable-next-line eqeqeq
        if (res == 'success') {
        } else {
          this.$toast('操作失败请重试!')
        }
      })

      this.show = false
    },
    lists () {
      listServiceXiangmu({
        PAGE: this.page * 10
      }).then((res) => {
        //   console.log(res);
        console.log('发送请求')
        // eslint-disable-next-line eqeqeq
        if (this.res == []) {
          this.msg1 = false
        }
        // this.vshow = res;
        let shujuArr = []
        // eslint-disable-next-line no-unused-vars
        let shujuArr1 = []
        for (var i = 0; i < res.length; i++) {
          let shuju = {}
          shuju.POSITION = res[i].POSITION
          shuju.NAME = res[i].NAME
          shuju.SEX = res[i].SEX
          shuju.AGE = res[i].AGE
          shuju.YEARS = res[i].YEARS
          shuju.SKILL = res[i].SKILL
          shuju.SALARY1 = res[i].SALARY1
          shuju.SALARY2 = res[i].SALARY2
          shuju.DISTRICT = res[i].DISTRICT
          shuju.EMPLOYEE_ID = res[i].EMPLOYEE_ID
          shuju.STATUS = res[i].STATUS
          shuju.PHOTO = res[i].PHOTO
          // eslint-disable-next-line eqeqeq
          if (shuju.STATUS == 1) {
            shuju.sx = true
            // eslint-disable-next-line eqeqeq
          } else if (shuju.STATUS == 0) {
            shuju.sx = false
          }
          shujuArr.push(shuju)
        }
        console.log(shujuArr)
        // eslint-disable-next-line no-redeclare
        for (var i = 0; i < shujuArr.length; i++) {
          this.vshow.push(res[i])
        }
        //   this.vshow = shujuArr;
        //   console.log(this.vshow);
        // eslint-disable-next-line eqeqeq
        if (res.length == 0) {
          this.msg = false
        } else {
          this.page++
        }
      })
    }

  },
  mounted () {
    window.scrollTo(0, 0)
    document.body.style.backgroundColor = '#FAF9FE'
    this.aa()
    var minAwayBtm = 0 // 距离页面底部的最小距离
    $(window).scroll(() => {
      var awayBtm = $(document).height() - $(window).scrollTop() - $(window).height()
      if (awayBtm <= minAwayBtm) {
        // alert("达到底部。");
        this.lists()
      } else {
        //  this.aa
      }
    })
  },
  created () {
    document.title = '我的求职'
  }
}
</script>
<style scoped>
.clear:after {
  content: "";
  display: block;
  clear: both;
}
.clear {
  zoom: 1;
}
.about{
    position: relative;
    font-size: 15px;
font-family: PingFang SC;
font-weight: 600;
overflow: hidden;
}
.head{
    width: 100%;
    background-color: #fff;
    position: fixed;
    top: 0px;
    font-size: 15px;
font-family: PingFang SC;
font-weight: bold;
}
.ssaa{
    text-align: center;
}
.top{
    width: 92%;
    height: 44px;
    margin: 0px auto;
    display: flex;
     justify-content:space-between;
     align-items:center;
}
.top img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
    margin-top: 5px;
}

.main1{
    margin-top: 44px;
}
.choes{
    width: 33.3%;
    height: 44px;
    text-align: center;
    display: flex;
    align-items:center;
}
.left{
    text-align: center;
}
.left span{
    font-size: 11px;

    padding: 2px 6px;
}
.choes .p{
    width: 100%;
    border-right: 1px solid #E5E5E5;
    text-align: center;
    margin: 0px auto;
    font-size: 16px;
    font-weight: 600;
}

.change{
    color:#1DA4F2;
}
.main{
    width: 100%;
    background-color: #fff;
    margin-bottom: 5px;
}
.fath{
    width: 92%;
    height: 120px;
    margin: 0px auto;
    display: flex;
    justify-content:space-between;
    align-items:center;

}
.left img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
h3,p{
    margin: 0px;
}
.center{
    width: 180px;
}
.ssx{
   display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
    -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
    overflow: hidden; /*超出的文本隐藏*/
    text-overflow: ellipsis; /* 溢出用省略号*/
    -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
}
.center p{
    font-weight: 500;
    font-size: 15px;
    color:#666666;
}
.center span{
    margin-right: 15px;
}
.right{
    text-align: right;
}
.right p{
    width: 72px;
    font-size: 15px;
    color: #1DA4F2;
}
.right span{
    font-size: 10px;
    font-weight: normal;

color: #999999
}
.button{
    width: 92%;
    margin: 0px auto;
}
button{
    float: right;
    width: 100px;
    height: 29px;
    border: 1px solid #1DA4F2;
    border-radius: 14.5px;
    /* line-height: 28px; */
    text-align: center;
    margin-bottom: 5px;
    background-color: #fff;

font-size: 15px;
font-family: PingFang SC;
font-weight: bold;
color: #1DA4F2;
}
.shanchu{
  margin-right: 15px;

border: 1px solid #E5E5E5;
color: #333;
}
.pop{
    width: 200px;
    height: 125px;
border-radius: 20px ;
}
.bbt{
  height: 30px;
  text-align: center;
  line-height: 30px;
  /* background-color: #e5e5e5; */
  color: #e5e5e5;
}
/deep/.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
</style>
